<template>
	<view class="">
		<view class="d-flex  flex-w jfy-sb">
			<navigator :url="'/pages/prot_details/prot_details?cid='+item.id" hover-class="hover-class"
				class="commodity-modul mt-20 d-flex flex-d jfy-sb" v-for="(item,index) in goodsData" :key='item.id'>
				<view class="position-r">
					<text class="discount" v-if="item.flag && item.flag>0">{{item.flag}}折</text>
					<image :src="item.logo" mode="aspectFill"></image>
				</view>
				<text class="text-overflow2 font-28 mt-10 font-w">{{item.title}}</text>
				<view class="d-flex-yCenter-sb font-28 mt-10">
					<view class="d-flex-yCenter">
						<text class="Price-color">￥{{item.price_selling}}</text>
						<text class="text-decoration ml-10">￥{{item.price_market}}</text>
					</view>
					<text class="Price-color" v-if="item.price_rate1>0">赚￥{{item.price_rate1}}</text>
				</view>
			</navigator>
		</view>
		<view class="py-30 text-al-center">
			<u-loadmore icon :load-text='loadText' :status="status" @loadmore="addRandomData"></u-loadmore>
		</view>
	</view>
</template>
<script>
	import {
		http_mall_goods_lst
	} from '@/config/apiRouter.js'
	export default {
		name: 'u-goods',
		data() {
			return {
				// 底部加载loder
				status: 'loading', //status对应的值loadText的key就是显示内容
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '哦豁！着 没有更多数据了'
				},
				getProps: {},
				goodsData: [],
				page: 1,
				last_page: null,
			}
		},
		watch: {
			last_page(value) {
				console.log(this.last_page);
				if (this.page == this.last_page || value == 0) this.status = 'nomore'
			}
		},
		methods: {
			getDataFun(type) {
				http_mall_goods_lst({
					data: {
						page: this.page,
						limit: 10,
						...this.getProps
					}
				}).then(res => {
					this.last_page = res.data.last_page
						// 用于搜索页面做缓存搜索历史
						!type && this.$emit('dataSuccess', res.data.data.length)
					type ? this.goodsData = this.goodsData.concat(res.data.data) : this.goodsData = res.data.data
					console.log(this.goodsData);
					// 获取成功之后向父组件发送当前获取商品列表长度
					this.$emit('goodsLength', this.goodsData.length)
				})
			},
			/**
			 * 加载商品列表
			 * props[object]
			 * 默认产书当前页 1
			 * 每次获取数据总数 10
			 * */
			gerGoodsProp(data = {}) {
				if (data.page) {
					this.page = data.page
					delete data.page
				}
				this.getProps = data
				this.getDataFun()
			},
			// 加载更多，无需参数
			comtsOnReachBottom() {
				console.log('当前页:', this.page, '末页:', this.last_page);
				if (this.page == this.last_page || this.last_page == 0) {
					this.status = 'nomore'
					return
				}
				this.page++
				this.getDataFun(true)
			}
		}
	}
</script>

<style lang="scss">
	.commodity-modul {
		width: 335rpx;

		.discount {
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			display: inline-block;
			padding: 6rpx 10rpx;
			border-radius: 8rpx;
			color: #fff;
			background: #FF890B;
		}

		image {
			width: 335rpx;
			height: 280rpx;
			border-radius: 12rpx;
		}
	}
</style>
